<!-- uniapp底部菜单 -->
<template>
	<div class="c1">
	  <div class="c2" @click="emit('selectImg', 'iconPath')">
		<img :src="config.qnUrl + element.iconPath" alt="" />
	  </div>
	  <p>未选中</p>
	</div>
	<div class="c1">
	  <div class="c2" @click="emit('selectImg', 'selectedIconPath')">
		<img :src="config.qnUrl + element.selectedIconPath" alt="" />
	  </div>
	  <p>已选中</p>
	</div>
	<div class="flex c3 c4">
	  <p>标题：</p>
	  <el-input v-model="element.name" clearable />
	</div>
	<div class="flex c3">
	  <p>链接：</p>
	  <el-input v-model="element.url" clearable />
	</div>
  </template>
  
  <script setup>
  import publicJS from "@/hook/public.js";
  const { config } = publicJS();
  const emit = defineEmits(["selectImg"]); //自定义事件
  const props = defineProps({
	element: {
	  type: Object,
	  default: () => {
		return {};
	  },
	},
  });
  </script>
  
  <style scoped lang="scss">
  img {
	width: 100%;
	height: 100%;
  }
  
  .c1 {
	margin-right: 20px;
  }
  
  .c1 p {
	text-align: center;
	font-size: 12px;
  }
  
  .c2 {
	cursor: pointer;
	width: 40px;
	height: 40px;
	border: 1px solid #eee;
	padding: 10%;
  }
  
  .c2:hover {
	border-color: var(--el-color-primary);
  }
  
  .c3 {
	flex: 1;
	p {
	  width: 50px;
	}
  }
  .c4 {
	margin-right: 20px;
  }
  </style>
  